<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Local Database Tutorial - Gears API - Google Code</title>
<link href="codesite.css" type="text/css" rel="stylesheet"/>
</head>
<body class="gc-documentation">

<div id="gc-container">

<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>
<div id="gc-topnav">
<h1>Gears Codelab</h1>
<ul id="docs" class="gc-topnav-tabs">
<li>
<strong>Taiwan Google Developer Day 2008&nbsp;</strong>
</li>
</ul>
</div> <!-- end gc-topnav -->


<div style="position: relative;" class="g-unit" id="gc-pagecontent">
<h1 class="page_title">Local Database</h1>


<p>Offline content derived from external sources can be stored
locally in a structured way by using Gears' local database
facilities. The assignments found in this document will help you create a
database, store useful information, and use it while the browser is in an
offline state. (Time estimate: 1 hour.)</p>

<h4>You will need:</h4>
<ul>
<li>Fulfill ALL prerequisites of the basic tutorial.</li>
<li>Please reference our <a
href="http://code.google.com/apis/gears/api_summary.html">Gears API
Documentation</a> [1] while reading this document.</li>
</ul>

<p>[1] http://code.google.com/apis/gears/api_summary.html</p>

<h1>Setup Initial Offline Framework</h1>

<h3>[ ] Download initial document</h3>

<p>We'll be working with a pre-written document that uses Calendar's
JSON APIs to list events from a particular Google User's account.
Please <a
href="http://imagine-it.org/google/spreadsheets/calendarout_wogears.html">download</a>
[1] the HTML document to begin work to take it offline.</p>

<h3>[ ] Add code to initialize gears</h3>

<p>See the <a href="tutorial.html">basic tutorial document</a> and/or the <a href="http://code.google.com/apis/gears">Gears API documentation</a> [2].</p>

<h3>[ ] Add code to create managed store for the document</h3>

<p>See the <a href="tutorial.html">basic tutorial document</a> and/or the <a href="http://code.google.com/apis/gears">Gears API documentation</a>.</p>

<h3>[ ] Download Samples and Tools</h3>

<p>You can download a zip file that has samples and tools from Gears' <a
href="http://code.google.com/apis/gears/tools.html">Resources and Tools</a> [3]
page. In here, you can see examples of how to interact with a database and also
find a tool called <code>dbquery.html</code>. We'll be using this later in the
lab.</p>

<p>[1] http://imagine-it.org/google/spreadsheets/calendarout_wogears.html<br/>
[2] http://code.google.com/api/gears<br/>
[3] http://code.google.com/apis/gears/tools.html</p>

<h1>Implement Local Database</h1>

<h3>[ ] Setup initial database and table</h3>

<p>Follow the Gears API documentation to setup an initial database and
table. The table should have two fields: <strong>title</strong> and
<strong>date</strong>, both of type varchar set to appropriate lengths.</p>

<p>See <a
href="http://code.google.com/apis/gears/api_database.html">Database Docs</a> [1]
and/or the samples you downloaded in the basic tutorial.</p>

<h3>[ ] Check your work via <code>dbquery.html</code></h3>

<p>In the basic tutorial, you download a zip file that contained
<code>gears_init.js</code>, sample code, and tools. Within tools, there is a
file called <code>dbquery.html</code>. Take this and put it in the same
directory as <code>gears_init.js</code> along with the HTML you've been working
with in this lab.</p>

<p>To see if the database is setup correctly, follow these steps:</p>

<ol>
<li>Load the <code>dbquery.html</code> file in your browser from your server.</li>
<li>Type the name of the database you created.</li>
<li>Hit enter on the default command, <code>select * from
sqlite_master</code>. It should show you the name of the tables and their
structure. Otherwise, if it is blank, then something didn't work.</li> 
</ol>

<p>You might see something like this, if it works:</p>

<table summary="table info"
cellspacing="0"><thead><tr><th>type</th><th>name</th><th>tbl_name</th><th>rootpage</th><th>sql</th></tr></thead><tbody><tr><td
class="odd">table</td><td class="odd">Events</td><td class="odd">Events</td><td
class="odd">3</td><td class="odd">CREATE TABLE Events (title varchar(255), date
		varchar(24))</td></tr></tbody></table>

<p>[1] http://code.google.com/apis/gears/api_database.html</p>

<h1>Populate Local Database</h1>

<h3>[ ] Modify the javascript code to store data locally</h3>

<p>The code in <code>calendarout_wogears.html</code> grabs Calendar data
through the JSON API. Use the same code to store the information in the
table that you created above.</p>

<h3>[ ] Use <code>dbquery.html</code> to check your work</h3>

<p>As you did in the section above, bring up <code>dbquery.html</code>. Select
the database and explore the table that you just created to make sure the data
elements from the JSON query were populated correctly.</p>

<h1>Final Assignment</h1>

<h3>[ ] Use Local Database By Default</h3>

<p>The code that you have been working so far will only use the local database
when it is offline. To make things more interesting, you can build applications
that use the local database when it contains the latest data. Since whether the
data up-to-date is domain specific, it will be out-of-scope for this
assignment.</p>

<p>Modify the code so that the database is queried first and displayed in the
same way. Try flushing the data so that the json feed is fetched when there is
no data in the database.</p>



</div><!-- end gc-pagecontent -->
</div> <!-- end codesite content -->

<hr/>
<div id="gc-footer" dir="ltr"> 
<div id="gc-footer-img"></div>
<div class="text">
Copyright 2008 Google Inc.
</div>
</div><!-- end gc-footer -->

</div><!-- end gc-container -->
</body>
</html>
